<template>
  <div class="toolbar colorMain">
    <div class="mt-10 mb-10">
      <el-form :inline="true" size="small">
        <el-form-item label="用户ID:"><el-input v-model="queryFrom.user_id"/></el-form-item>
        <el-form-item label="活跃"><date-picker v-model="queryFrom.time_range"/></el-form-item>
        <el-form-item label="注册"><date-picker v-model="queryFrom.registered_time_range"/></el-form-item>
        <el-form-item label="渠道" size="small"><channel v-model="queryFrom.channel"/></el-form-item>
        <el-form-item label="充值范围:"><el-input v-model="queryFrom.recharge_amount_min"  placeholder="下限"/></el-form-item>
        <el-form-item label="-"><el-input v-model="queryFrom.recharge_amount_max "  placeholder="上限" /></el-form-item>
        <el-form-item label="展示纬度" >
          <el-switch v-model.number="queryFrom.display_dimension" :active-value="1" :inactive-value="0" :disabled="queryFrom.user_id?false:true" active-text="单日展示" inactive-text="汇总展示" />
        </el-form-item>
        <el-button size="small" type="primary" @click="sendQuery">提交</el-button>
      </el-form>
    </div>
    <div><el-button :loading="excelLoad" icon="el-icon-printer" style="float: right;margin: 0 0 10px 0" size="mini" type="success" @click="downExcel" >导出数据</el-button></div>
    <analyse-table :table-data="tableData" :key_mapper="key_mapper" :sortable = "['_user_id', 'chn']" :min-width = "160" size="small" @sort-change="sortChange"/>
    <el-pagination :current-page.sync="page" :page-size="size" :total.sync="total" class="mt-10" layout="total, sizes, prev, pager, next, jumper" @current-change="currentChange" @size-change="handleSizeChange"/>
  </div>
</template>
<script>
import { pickTime1, pickTimeLast } from '@/model/DateRange'
import { getActiveUser } from '@/api/table'
import mixins from '@/model/mixins'
export default {
  name: 'Active',
  mixins: [mixins],
  data() {
    return {
      queryFrom: {
        channel: [],
        sort_by:'-recharge',
        time_range: pickTime1,
        registered_time_range: pickTimeLast
      },
      API: getActiveUser
    }
  },
  watch: {
    'queryFrom.user_id':function(){
      if(!this.queryFrom.user_id){
        this.queryFrom.display_dimension=0;
        delete this.queryFrom.user_id
      }
    },
    'queryFrom.display_dimension':function() {
      if(this.queryFrom.display_dimension===1&&this.queryFrom.user_id){
        this.queryFrom.sort_by='-day'
      }else{
         this.queryFrom.sort_by='-recharge'
      }
    }
  },
}
</script>
